<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Capture - 捕获页面</title>
    <style>
      .container {
        padding: 20px;
      }
      .content {
        margin: 20px 0;
      }
      .controls {
        margin-bottom: 20px;
      }
      #snapshot-data {
        width: 100%;
        height: 200px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>DOM 捕获演示</h1>
      <div class="controls">
        <button onclick="addElement()">添加元素</button>
        <button onclick="addForm()">添加表单</button>
        <button onclick="capture()">捕获快照</button>
        <button onclick="copyData()">复制快照数据</button>
      </div>
      <div id="source-content" class="content">
        <p>这是初始内容</p>
      </div>
      <textarea id="snapshot-data" placeholder="快照数据将显示在这里"></textarea>
    </div>

    <script src="../../dist/domrecord.umd.min.js"></script>
    <script>
      function addElement() {
        const div = document.createElement('div');
        div.textContent = '动态元素 - ' + new Date().toLocaleTimeString();
        document.getElementById('source-content').appendChild(div);
      }

      function addForm() {
        const form = document.createElement('form');
        form.innerHTML = `
                <input type="text" placeholder="输入文本">
                <select>
                    <option>选项1</option>
                    <option>选项2</option>
                </select>
                <input type="checkbox"> 复选框
            `;
        document.getElementById('source-content').appendChild(form);
      }

      function capture() {
        const snapshot = domrecord.snapshot();
        document.getElementById('snapshot-data').value = JSON.stringify(snapshot, null, 2);
      }

      function copyData() {
        const textarea = document.getElementById('snapshot-data');
        textarea.select();
        document.execCommand('copy');
        alert('快照数据已复制到剪贴板！');
      }
    </script>
  </body>
</html>
